<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>流程编排-任务执行-新建</title>

    <link rel="stylesheet" href="../../plugins/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="../../plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="../../plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <link rel="stylesheet" href="../../plugins/codemirror/codemirror.css">
    <link rel="stylesheet" href="../../plugins/codemirror/theme/darcula.css">
    <link rel="stylesheet" href="../../plugins/codemirror/addon/hint/show-hint.css">
    <link rel="stylesheet" href="../../plugins/ion-rangeslider/css/ion.rangeSlider.min.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-slider/css/bootstrap-slider.min.css">
    <link rel="stylesheet" href="../../adminLTE/css/adminlte.min.css">
    <link rel="stylesheet" href="../css/cloud.css">
    <style>

    </style>
</head>
<body class="content-wrapper" style="padding: 15px">
<!--基本信息-->
<div class="card card-outline card-info">
    <div class="card-header">
        <h3 class="card-title"><i class="fa fa-commenting"></i> 基本信息</h3>
    </div>
    <div id="base-info" class="card-body">
        <input type="hidden" id="id" >
        <div class="form-group row">
            <label for="name" class="col-md-1 col-form-label">名称</label>
            <div class="col-md-5"><input type="text" class="form-control" id="name" placeholder="请输入任务名称" ></div>
        </div>
        <div class="form-group row">
            <label for="template" class="col-md-1 col-form-label">任务模板</label>
            <div class="col-md-5">
                <div class="select2-info">
                    <select class="select2" data-dropdown-css-class="select2-info" data-placeholder="请选择任务模板" id="template" style="width: 100%;"></select>
                </div>
            </div>
        </div>
        <div class="form-group row">
            <label for="user" class="col-md-1 col-form-label">责任人</label>
            <div class="col-md-5">
                <div class="select2-info">
                    <select class="select2" data-dropdown-css-class="select2-info" data-placeholder="请选择责任人" id="user" style="width: 100%;"></select>
                </div>
            </div>
        </div>
    </div>
</div>
<!--目标服务器-->
<div class="card card-outline card-info">
    <div class="card-header">
        <h3 class="card-title"><i class="fa fa-server"></i> 服务器</h3>
    </div>
    <div id="task-server" class="card-body">
        <div class="form-group row">
            <label for="task-server-{{index}}" class="col-md-1 col-form-label"># {{index}}</label>
            <div class="col-md-5">
                <div class="select2-info">
                    <select id="task-server-{{index}}" class="select2 task-server-value" data-dropdown-css-class="select2-info" data-placeholder="请选择{{index}}号目标服务器" style="width: 100%;"></select>
                </div>
            </div>
        </div>
    </div>
</div>
<!--模板参数-->
<div class="card card-outline card-info">
    <div class="card-header">
        <h3 class="card-title"><i class="fa fa-modx"></i> 模板参数</h3>
    </div>
    <div id="task-arg" class="card-body">
        <div class="form-group row">
            <label for="task-arg-{{id}}" class="col-md-1 col-form-label">{{name}}</label>
            <div class="col-md-3"><input type="text" class="form-control task-arg-value" id="task-arg-{{id}}" data-id="{{id}}"></div>
            <label class="col-md-6 col-form-label text-gray font-weight-light">{{description}}</label>
        </div>
    </div>
</div>

<div class="clearfix">
    <button id="task-save" type="button" class="btn btn-danger pull-right ml-1"><i class="fa fa-check"></i> 保存</button>
</div>

<script src="../../plugins/jquery/jquery.min.js"></script>
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../../plugins/select2/js/select2.full.min.js"></script>
<script src="../../plugins/ion-rangeslider/js/ion.rangeSlider.min.js"></script>
<script src="../../plugins/bootstrap-slider/bootstrap-slider.min.js"></script>
<script src="../../plugins/codemirror/codemirror.js"></script>
<script src="../../plugins/codemirror/mode/sql/sql.js"></script>
<script src="../../plugins/codemirror/mode/shell/shell.js"></script>
<script src="../../plugins/codemirror/mode/javascript/javascript.js"></script>
<script src="../../adminLTE/js/adminlte.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/child.js"></script>
<script>
    var select2Template = new Select2Ctrl("#template", Url.automationService.autoTaskTemplatePage, "id", "name", "select2");
    select2Template.init();
    var select2User = new Select2Ctrl("#user", Url.baseService.userPage, "id", "userName", "select2");
    select2User.init(parent.window.frameCtrl.authCtrl.session.id);

    var select2Servers = [];

    var serverTemplate;
    var argTemplate;

    var getServerTemplate = function () {
        serverTemplate = $("#task-server").html();
        $("#task-server").html("");
    }
    var getArgTemplate =  function () {
        argTemplate = $("#task-arg").html();
        $("#task-arg").html("");
    }
    var selectTemplate = function () {
        var templateId = $("#template").val();
        $.ajax({
            url: Url.automationService.autoTaskTemplateDetail.replace("{id}", templateId),
            type: HttpMethod.get,
            success: function (result, status, xhr) {
                $("#task-server").html("");
                select2Servers = [];
                for (let i = 0; i < result.serverCount; i++) {
                    $("#task-server").append(serverTemplate
                        .replace(new RegExp("{{index}}", "gm"), i + 1)
                    );
                    var select2Server = new Select2Ctrl("#task-server-" + (i + 1), Url.automationService.autoSshServerPage, "id", "name", "select2");
                    select2Server.init();
                    select2Servers.push(select2Server);
                }

                $("#task-arg").html("");
                if (result.args) {
                    for (let i = 0; i < result.args.length; i++) {
                        if (result.args[i].type === "INPUT") {
                            $("#task-arg").append(argTemplate
                                .replace(new RegExp("{{id}}", "gm"), result.args[i].id)
                                .replace(new RegExp("{{name}}", "gm"), result.args[i].name)
                                .replace(new RegExp("{{description}}", "gm"), result.args[i].description)
                            );
                        }
                    }
                }
            }

        });
    }
    var checkRequireSelect2 = function (dom) {
        if (Utils.isEmpty($(dom).val())) {
            $(dom).attr("data-dropdown-css-class", "select2-danger")
                .parent().removeClass("select2-info").addClass("select2-danger");
            return false;
        } else {
            $(dom).attr("data-dropdown-css-class", "select2-info")
                .parent().removeClass("select2-danger").addClass("select2-info");
            return true;
        }
    };
    var checkRequireInput = function (dom) {
        if (Utils.isEmpty($(dom).val())) {
            $(dom).removeClass("is-valid").addClass("is-invalid");
            return false;
        } else {
            $(dom).removeClass("is-invalid").addClass("is-valid");
            return true;
        }
    };
    var checkRequire = function (dom) {
        if ($(dom).hasClass("select2")) {
            return checkRequireSelect2(dom);
        } else {
            return checkRequireInput(dom);
        }
    }
    var checkData = function () {
        var validate = true;
        validate = checkRequire($("#name")) && validate;
        validate = checkRequire($("#template")) && validate;
        validate = checkRequire($("#user")) && validate;
        $("#task-server .task-server-value").each(function (svrIndex, svrDom) {
            validate = checkRequire($(svrDom)) && validate;
        });
        $("#task-arg .task-arg-value").each(function (argIndex, argDom) {
            validate = checkRequire($(argDom)) && validate;
        });
        return validate;
    }
    var getData = function () {
        var data = {};
        data.id = $("#id").val();
        data.autoTaskTemplateId = $("#template").val();
        data.name = $("#name").val();
        data.servers = [];
        data.args = [];
        $("#task-server .task-server-value").each(function (svrIndex, svrDom) {
            data.servers.push($(svrDom).val());
        });
        $("#task-arg .task-arg-value").each(function (argIndex, argDom) {
            var arg = {};
            arg.autoTaskTemplateArgId = $(argDom).attr("data-id");
            arg.value = $(argDom).val();
            data.args.push(arg);
        });
        data.ownerId = $("#user").val();
        return data;
    };

    var bindEvent = function () {
        $("#template").change(selectTemplate);
        // 保存按钮
        $("#task-save").click(function () {
            var validate = checkData();
            if (!validate) {
                return;
            }

            var data = getData();

            if (data.id) {
                $.ajax({
                    url: Url.automationService.autoTaskHistoryModify.replace("{id}", data.id),
                    type: HttpMethod.put,
                    data: JSON.stringify(data),
                    contentType: ContentType.json,
                    success: function (result, status, xhr) {
                        parent.window.frameCtrl.toastr.success("修改成功！");
                        parent.window.frameCtrl.windowCtrl.close();
                    }
                });
            } else {
                $.ajax({
                    url: Url.automationService.autoTaskHistoryCreate,
                    type: HttpMethod.post,
                    data: JSON.stringify(data),
                    contentType: ContentType.json,
                    success: function (result, status, xhr) {
                        parent.window.frameCtrl.toastr.success("创建成功！");
                        parent.window.frameCtrl.windowCtrl.close();
                    }
                });
            }
        });
    }

    getServerTemplate();
    getArgTemplate();
    bindEvent();


</script>

</body>
</html>